<template>
  <!-- 综合统计 -->
  <div class="census">
    <div class="census-con">
      <div class="census-flight">
        <div class="census-title">
          <p>飞行数据统计</p>
          <div class="census-more" @click="clickMore(1)">
            <img src="@/assets/img/home/icon_more.png" alt="" />
            更多详情
          </div>
        </div>

        <div class="flight-con">
          <Flight></Flight>
        </div>
      </div>
      <div class="census-bottom">
        <div class="census-device">
          <div class="census-title">
            <p>平台设备统计</p>
            <div class="census-more" @click="clickMore(2)">
              <img src="@/assets/img/home/icon_more.png" alt="" />
              更多详情
            </div>
          </div>

          <div class="flight-con">
            <Device></Device>
          </div>
        </div>
        <div class="census-user">
          <div class="census-title">
            <p>平台用户统计</p>
            <div class="census-more" @click="clickMore(3)">
              <img src="@/assets/img/home/icon_more.png" alt="" />
              更多详情
            </div>
          </div>

          <div class="flight-con">
            <User></User>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {useRouter} from 'vue-router';
import Flight from './components/flight.vue';
import Device from './components/device.vue';
import User from './components/user.vue';

const router = useRouter();
const clickMore = (index) => {
  switch (index) {
    case 1:
      router.push('/flightDataDetail');
      break;
    case 2:
      router.push('/deviceManage');
      break;
    case 3:
      router.push('/userManage');
      break;
    default:
      break;
  }
};
</script>
<style lang="scss" scoped>
.census {
  width: 100%;
  height: 100%;
  background: #020e3f;
  p {
    margin: 0;
  }
  &-con {
    padding: 11px 30px 30px 30px;
  }
  .census-title {
    height: 40px;
    text-align: center;
    font-size: 20px;
    color: #00fcff;
    font-weight: 600;
    position: relative;
    > p {
      margin-top: 10px;
    }
  }
  .census-more {
    position: absolute;
    right: 40px;
    bottom: 0;
    font-size: 13px;
    color: #00ff9c;
    font-weight: bold;
    display: flex;
    align-items: center;
    cursor: pointer;
    > img {
      margin-right: 5px;
    }
  }
  .census-flight {
    height: 520px;
    background: url(@/assets/img/census/flight_bg.png) no-repeat;
    background-size: 100% 100%;
    overflow: hidden;
    &-con {
      margin-top: 10px;
    }
  }

  .census-bottom {
    margin-top: 30px;
    display: flex;
    .census-device {
      width: 875px;
      height: 428px;
      background: url(@/assets/img/census/device_bg.png) no-repeat;
      background-size: 100% 100%;
    }
    .census-user {
      margin-left: 31px;
      flex: 1;
      height: 432px;
      background: url(@/assets/img/census/user_bg.png) no-repeat;
      background-size: 100% 100%;
    }
  }
}
</style>
